<template>
  <div class="wrapper">
    <catalog></catalog>
    <example>
      <template v-slot:title>
        基本用法
      </template>
      <l-checkbox v-model="checkboxModel1">复选框</l-checkbox>
      <template v-slot:code>
        {{checkboxExample.example1}}
      </template>
    </example>

    <example>
      <template v-slot:title>
        change事件
      </template>
      <l-checkbox v-model="checkboxModel2" @change="checkboxChange">复选框</l-checkbox>
      <template v-slot:code>
        {{checkboxExample.example2}}
      </template>
    </example>

  </div>
</template>

<script>
import Catalog from '../components/Catalog';
import Example from '../components/Example';
import CheckboxExample from './Checkbox-Example';

export default {
  name: 'Checkbox',
  components: {
    Catalog,
    Example
  },
  methods: {
    checkboxChange (model) {
      alert('现在复选框的model值为：' + model);
    }
  },
  data () {
    return {
      checkboxExample: CheckboxExample,
      checkboxModel1: false,
      checkboxModel2: true
    };
  }
};
</script>
